<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div
        class="title"
        v-drag="['.ba-operate-dialog', '.el-dialog__header']"
        v-zoom="'.ba-operate-dialog'"
      >
        {{ baTable.form.operate !== "edit" ? "网关添加" : "网关编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item prop="code" label="编号">
            <el-input
              v-model="baTable.form.items!.code"
              type="string"
              placeholder="请输入网关编号"
              @blur="auto"
            ></el-input>
            <div class="block-help">网关编号输入完成后无需再填写队列名</div>
          </el-form-item>
          <el-form-item prop="type" label="型号">
            <el-input
              v-model="baTable.form.items!.type"
              type="string"
              placeholder="请输入网关型号"
            ></el-input>
          </el-form-item>

          <el-form-item prop="mqttAddr" label="地址">
            <el-input
              v-model="baTable.form.items!.mqttAddr"
              type="string"
              placeholder="mqtt连接地址(url)"
            ></el-input>
            <!-- <div class="block-help">如果为外部链接请以 http(s):// 为开头</div> -->
          </el-form-item>
          <el-form-item prop="mqttPort" label="端口">
            <el-input
              v-model="baTable.form.items!.mqttPort"
              type="string"
              placeholder="mqtt连接端口(port)"
            ></el-input>
          </el-form-item>
          <el-form-item prop="mgttName" label="用户名">
            <el-input
              v-model="baTable.form.items!.mgttName"
              type="string"
              placeholder=""
            ></el-input>
            <div class="block-help">认证需要</div>
          </el-form-item>
          <el-form-item prop="mgttPassword" label="密码">
            <el-input
              v-model="baTable.form.items!.mgttPassword"
              type="string"
              placeholder=""
            ></el-input>
            <div class="block-help">认证需要</div>
          </el-form-item>
          <el-form-item prop="cardNumber" label="流量卡号">
            <el-input
              v-model="baTable.form.items!.cardNumber"
              type="string"
              placeholder="请输入流量卡号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="cmdName" label="命令队列名">
            <el-input
              v-model="baTable.form.items!.cmdName"
              type="string"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item prop="stateName" label="状态队列名">
            <el-input
              v-model="baTable.form.items!.stateName"
              type="string"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item prop="topic" label="数据队列名">
            <el-input
              v-model="baTable.form.items!.topic"
              type="string"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          {{
            baTable.form.operateIds &&
            (baTable.form.operateIds.length > 1 ||
              (baTable.form.operateIds as TableRow).parentId)
              ? "保存并编辑下一项"
              : "保存"
          }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import type { TableRow } from "@/utils/baTable"; //表格列行类型
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";

//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const formRef = ref<InstanceType<typeof ElForm>>();

//自动输入某些设备
const auto = () => {
  baTable.form.items!.cmdName = "CmdSub_" + baTable.form.items!.code;
  baTable.form.items!.stateName = "StatusPub";
  baTable.form.items!.topic = "DataPub";
};

const rules = reactive<FormRules>({
  code: [{ required: true, message: "网关编号不能为空", trigger: "blur" }],
  type: [{ required: true, message: "网关类型不能为空", trigger: "blur" }],
  mqttAddr: [
    { required: true, message: "mqtt连接地址(url)不能为空", trigger: "blur" },
  ],
  mqttPort: [
    { required: true, message: "mqtt连接端口(port)不能为空", trigger: "blur" },
  ],
  mgttName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  mgttPassword: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  cardNumber: [
    { required: true, message: "流量卡号不能为空", trigger: "blur" },
  ],
  cmdName: [{ required: true, message: "命令队列名不能为空", trigger: "blur" }],
  stateName: [
    { required: true, message: "状态队列名不能为空", trigger: "blur" },
  ],
  topic: [{ required: true, message: "数据队列名不能为空", trigger: "blur" }],
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
